<template>
  <div class="container">
    <!-- 头部的 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3">
        <div class="grid-content bg-l">
          <img src="../../assets/Verification/pal  logo.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-r">
          <div class="bg-box">
            <img src="../../assets/Verification/phone.png" alt="">
          </div>
          <div class="contus">
            <span>全国服务热线</span>
            <font>400-716-2588</font>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标题部分 -->
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p></p>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-dark">
          <p>欢迎注册SPF-Pal平台</p>
        </div>
      </el-col>
    </el-row>
    <!-- steps条 -->
    <el-steps :active="3" align-center finish-status="success" simple
      style="margin-top:52px;width:63%;margin-left:300px">
      <el-step title="账号注册"></el-step>
      <el-step title="完善资料"></el-step>
      <el-step title="注册成功"></el-step>
    </el-steps>
    <div class="tip-box">
        <img src="../../assets/Verification/gouhao.png" alt="">
    </div>
    <div class="tip-box1">
        <el-button type="success" @click=gotoReg4()>继续完善企业信息</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      active: 0,
      form: {
        name: ''
      }
    }
  },

  methods: {
    next() {
      if (this.active++ > 3) this.active = 0
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
          this.$router.push('/registersetp3')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    gotoReg4(){
        this.$router.push('/registersetp4')

    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background-color: #eff3f8;
  height: 905px;
}
.row-bg {
  background-color: #f2f2f2;
  box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
}
.bg-l,
.bg-r {
  margin-top: 28px;
  margin-left: 63px;
}
.bg-r {
  // width: 100%;
  height: 41px;
  .bg-box {
    float: left;
  }
  .contus {
    float: left;
  }
}
.bg-r img {
  display: inline-block;
  width: 40px;
  height: 41px;
}
span {
  display: block;
  width: 90px;
  height: 15px;
  font-size: 15px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(82, 82, 82, 1);
  margin-top: -3px;
  margin-left: 5px;
}
font {
  display: block;
  height: 19px;
  font-size: 24px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(19, 120, 218, 1);
  line-height: 14px;
  margin-top: 11px;
  margin-left: 5px;
}
p {
  width: 186px;
  height: 18px;
  font-size: 19px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(85, 85, 85, 1);
  line-height: 20px;
  margin-top: 40px;
}
.el-form {
  width: 500px;
  margin: auto;
  margin-top: 120px;
}
.demo-ruleForm {
  margin-top: 0px;
  margin-left: -20px;
}
.tip-box{
  width: 173px;
  height: 70px;
  margin: auto;
  margin-top: 200px;
  img {
    border:1px dashed #ccc;
    display: inline-block;
    width: 65px;
    height: 65px;
    margin-left:53px;
  }
  .el-button{
    margin-top: 30px;
    color: red;
  }
}
.tip-box1{
  width: 154px;
  margin: auto;
  margin-top: 10px;
}
</style>